<template>
  <div class="flex_delivery">
    <DateChart :commonEchartsObj="chartD1" :wan="false" ></DateChart>
    <DateChart :commonEchartsObj="chartD2" :wan="false" ></DateChart>
    <div class="bar">
      <div class="title">误时投递正确率</div>
      <avue-echart-pie :option="option" :data="data" width="300" height="200"></avue-echart-pie>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {add, deliveryChart1, deliveryChart2,deliveryChart3} from "@/api/sorting/mistake";
  import moment from 'moment'
  import DateChart from '@/components/echart/datecharts.vue'
  export default {
    data() {
      return {
        chartD1: {
          echarts_name: `delivery1`,
          line_list: [],
          line_date: [],
        },
        chartD2: {
          echarts_name: `delivery2`,
          line_list: [],
          line_date: [],
        },
        data: [
          { value: 1, name: '合格' },
          { value: 1, name: '不合格' },
        ],
        option: {
          width: 300,
          height: 200,
          title: '手机大比拼',
          subtitle: '纯属虚构',
          labelShow:true,
          radius: false,
          "barColor": [
            {
              "color1": "#559fff",
            },
            {
              "color1": "#25d45b",
            }
          ]
        },
      };
    },
    components: {
      DateChart
    },
    props: ['searchForm', 'searchFormChatFalg'],
    mounted() {
      this.getDeliveryData()
    },
    methods: {
      getDeliveryData() {
        let row = {...this.searchForm}
        delete row.$deptId;
        delete row.$garbageType;
        deliveryChart1(row).then((res) => {

          console.log(res);
          this.handleData1(res.data || [])
        }, error => {

        });
        deliveryChart2(row).then((res) => {

          this.handleData2(res.data || [])
        }, error => {

        });
        deliveryChart3(row).then((res) => {
          this.data = [
            { value: res.data.qualified, name: '合格' },
            { value: res.data.unqualified, name: '不合格' },
          ]
        }, error => {

        });
      },
      handleData1(arr) {
        let arr1 = []
        this.chartD1.line_date = []
        arr.forEach(item => {
          this.chartD1.line_date.push(moment(item.deliverDate, 'YYYYMMDD').format('MM-DD'))
          arr1.push(item.number)
        })
        var series = [
          {
            name: '误时投递频次',
            type: 'line',
            showSymbol: false,
            symbol: 'diamond',
            symbolSize: 4,
            colorClass: 'kline-pink',
            lineStyle: {
              width: 1,
              color: '#FF8A8F'
            },
            itemStyle: {
              color: '#FF8A8F',
              borderWidth: 1,
              borderColor: '#fff',
              shadowBlur: 12,
              shadowColor: '#FF8A8F',
            },
            data: arr1
          }
        ];
        this.$set(this.chartD1, 'line_list', series);
      },
      handleData2(arr) {
        let arr1 = []
        this.chartD2.line_date = []
        arr.forEach(item => {
          this.chartD2.line_date.push(moment(item.deliverDate, 'YYYYMMDD').format('MM-DD'))
          arr1.push(item.weightOfKG)
        })
        var series = [
          {
            name: '误时投递重量(kg)',
            type: 'line',
            showSymbol: false,
            symbol: 'diamond',
            symbolSize: 4,
            colorClass: 'kline-pink',
            lineStyle: {
              width: 1,
              color: '#3489FF'
            },
            itemStyle: {
              color: '#3489FF',
              borderWidth: 1,
              borderColor: '#fff',
              shadowBlur: 12,
              shadowColor: '#3489FF',
            },
            data: arr1
          }
        ];
        this.$set(this.chartD2, 'line_list', series);
      }
    },
    watch: {
      searchFormChatFalg(n,o) {
        if (n !== o) {
          this.getDeliveryData()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.flex_delivery{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 50px;
  margin-top: 30px;
  .bar{
    position: relative;
    .title{
      position: absolute;
      left:5px;
      top:10px;
      color:#303133;
      font-size:12px;
    }
  }
}
</style>
